<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  </head>
  <body>
    <div id="example">
      <h2>成绩表</h2>
      <label>姓名：</label><span>{{name}}</span> <label>性别：</label><span>{{sex}}</span> <label>年龄：</label
      ><span>{{age}}</span>
      <div class="report">
        <div class="title">
          <div>学期</div>
          <div>数学</div>
          <div>物理</div>
          <div>化学</div>
          <div>英语</div>
          <div>计算机</div>
          <div>总分</div>
        </div>
        <div class="content" v-for="(grade,index) in grades">
          <div>{{grade.term}}</div>
          <div v-for="score in grade.scores">
            <div>{{score}}</div>
          </div>
          <div>{{total(index)}}</div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      var exam = new Vue({
        el: '#example',
        data: {
          name: '张无忌', //姓名
          sex: '男', //性别
          age: 20, //年龄
          grades: [
            {
              //学期和考试成绩
              term: '第一学期',
              scores: {
                math: 90,
                physics: 85,
                chemistry: 95,
                english: 86,
                computer: 96,
              },
            },
            {
              term: '第二学期',
              scores: {
                math: 92,
                physics: 83,
                chemistry: 90,
                english: 88,
                computer: 95,
              },
            },
          ],
        },
        methods: {
          total: function (index) {
            var total = 0; //定义总分
            var obj = this.grades[index].scores; //获取分数对象
            for (var i in obj) {
              total += obj[i];
            }
            return total; //返回总分
          },
        },
      });
    </script>
  </body>
</html>
